<template>
  <Modal
    v-model='isShow'
    title='修改任务'
    @on-ok='confirm'
    :loading='isLoading'
    @on-cancel='cancel'>
    <Input v-model='name' placeholder='请输入任务名称' />
    <Select class='mt-4' placeholder='请选择是否传递该任务' v-model='isTransfer'>
      <Option :value='1'>传递该任务</Option>
      <Option :value='0'>不传递该任务</Option>
    </Select>
    <div class='relative'>
      <div class='border code-input mt-4 bg-[#f3f3f3]  outline-0' ref='inputRef'
           contenteditable='true'
           @input='inputMessage'></div>
      <div class='absolute text-[#b8bbc3] left-[1em] top-[1em]'
           v-if='content == null || content== "" || content == "\n"'>请输入SQL
      </div>
    </div>
  </Modal>
</template>

<script>
import 'highlight.js/styles/default.css'

import hljs from 'highlight.js/lib/core'
import sql from 'highlight.js/lib/languages/sql'
import { HTTP_API } from '@/global/global'
import axios from 'axios'
import { busEmit } from '@/tool/busTool'

export default {
  name: 'addEnvDialog.vue',
  data() {
    return {
      isShow: false,
      name: null,
      id: null,
      content: '',
      isTransfer: 1,
      isLoading: true,
      originIndex: null
    }
  },
  mounted() {
  },
  methods: {
    show(taskModel) {
      this.isShow = true
      this.id = taskModel.id
      this.name = taskModel.name
      this.content = taskModel.content
      this.isTransfer = taskModel.isTransfer ? 1 : 0
      this.render()
    },
    inputMessage(event) {
      this.content = event.target.innerText
      this.render()
    },
    render() {
      this.$nextTick(() => {
        console.log(this.content)
        hljs.registerLanguage('sql', sql)
        this.$refs.inputRef.innerHTML = this.highlightBlock(hljs.highlight(this.content, { language: 'sql' }).value, 'sql')

        // 保留光标位置
        const selection = window.getSelection()
        const range = document.createRange()
        range.selectNodeContents(this.$refs.inputRef)
        range.collapse(false)
        selection.removeAllRanges()
        selection.addRange(range)
      })
    },
    close() {
      this.isShow = false
    },
    highlightBlock(str, lang) {
      return `<pre class='pre-code-box'><div class='pre-code-header'></div><div class='pre-code'><code class='hljs code-block-body ${lang}'>${str}</code></div></pre>`
    },
    async confirm() {
      if (this.name == null || this.name == '') {
        this.$Message.warning('请输入名称')
        this.isLoading = false
        this.$nextTick(() => {
          this.isLoading = true
        })
        return
      }
      if (this.content == null || this.content == '') {
        this.$Message.warning('请输入内容')
        this.isLoading = false
        this.$nextTick(() => {
          this.isLoading = true
        })
        return
      }
      try {
        this.isFetch = true
        await axios.post(HTTP_API + '/task/update', {
          id: this.id,
          name: this.name,
          content: this.content,
          isTransfer: this.isTransfer == 1 ? true : false,
          originIndex: this.originIndex,
          createName: localStorage.getItem('name')
        })
        this.$Message.success('修改成功')
      } catch (err) {
        this.$Message.success('修改失败')
      } finally {
        this.isShow = false
        busEmit('refreshTask')
      }
    },
    cancel() {
      this.isShow = false
    }
  }
}
</script>

<style scoped>
.code-input {
  border-color: #57a3f3;
  height: 200px;
  overflow-y: auto;
}

.code-input:focus {
  border-color: #57a3f3;
  outline: 0;
  box-shadow: 0 0 0 2px rgba(45, 140, 240, .2);
}
</style>